<template>
  <div class="comments">
    <div class="content">
      <div class="userInfo">
        <img
          v-if="commentData.user.head_img"
          :src="commentData.user.head_img | flxImgUrl"
          alt=""
        />
        <img v-else src="../../../image/2.png" alt="" />
        <div class="info">
          <div class="name">
            {{ commentData.user.nickname || commentData.user.username }}
          </div>
          <div class="date">2小时前</div>
        </div>
        <div class="huifu" @click="sendComment">回复</div>
      </div>
      <CommentParent
        :parentData="commentData.parent"
        v-if="commentData.parent"
      />
      <div class="text">{{ commentData.content }}</div>
    </div>
  </div>
</template>

<script>
// 引入了一个 eventBus vue 实例
import eventBus from "../../utils/eventBus";
import CommentParent from "./parent";
export default {
  props: ["commentData"],
  components: {
    CommentParent,
    eventBus,
  },
  methods: {
    sendComment() {
      // 可以用 $emit 给这个实例触发事件
      eventBus.$emit("sendComment", this.commentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.comments {
  padding-top: 20 / 360 * 100vw;

  background-color: #f8fcff;
  .content {
    padding: 0 20 / 360 * 100vw;
    border-bottom: 1 / 360 * 100vw solid #ddd;
    .userInfo {
      display: flex;
      align-items: center;
      padding-bottom: 5 / 360 * 100vw;
      img {
        width: 30 / 360 * 100vw;
        height: 30 / 360 * 100vw;
        border-radius: 50%;
        margin-right: 10 / 360 * 100vw;
      }
      .info {
        flex: 1;
        font-size: 14 / 360 * 100vw;
        .date {
          font-size: 12 / 360 * 100vw;
          padding-top: 5 / 360 * 100vw;
          color: #888;
        }
      }
      .huifu {
        font-size: 12 / 360 * 100vw;
        color: #888;
      }
    }
    .text {
      padding: 20 / 360 * 100vw 0;
      // 有些评论, aaaaaaaaaaaaaaaaaaaaaaa
      // 或者 11111111111111111111
      // 之类不会自动换行
      // 会撑开页面破坏布局
      word-break: break-all;
    }
  }
}
</style>